<template>
  <view class="app-page">
    <view class="qs-desktop">
      <view class="qs-desktop-item" :style="itemStyle" v-for="(v, i) in iconList" :key="v.text">
        <view class="qs-desktop-item__content">
          <view class="qs-desktop-icon__content" :style="iconStyle">
            <view class="qs-desktop_icon" :class="v.shakeClass" :style="{ 'background-color': v.bgColor }">
              {{ v.icon }}
            </view>
            <view class="qs-del-icon" v-if="shakeing" @click="delIcon(i)">x</view>
          </view>
          <view>{{ v.text }}</view>
        </view>
      </view>
    </view>
    <view>
      <button @click="startShake">开始抖动</button>
      <button @click="cancelShake">恢复正常</button>
    </view>
  </view>
</template>

<script>
const randomShakeClass = () => {
  const sq = [1, 2, 3, 4, 5, 6];
  const num = sq[Math.floor(Math.random() * sq.length)];
  return `qs-shake-a${num}`;
};
let timeerId = null;
export default {
  data() {
    return {
      colNum: 4,
      shakeing: false,
      iconList: [
        { text: 'QQ', icon: 'Q', bgColor: '#00bdff', shakeClass: '' },
        { text: '微信', icon: '微', bgColor: '#25bd6d', shakeClass: '' },
        { text: '微博', icon: '微', bgColor: '#ff1010', shakeClass: '' },
        { text: '小红书', icon: '小', bgColor: '#fc0280', shakeClass: '' },
        { text: '淘宝', icon: '淘', bgColor: '#fd8008', shakeClass: '' },
        { text: '支付宝', icon: '支', bgColor: '#66ccff', shakeClass: '' },
        { text: '消消乐', icon: '消', bgColor: '#8000ff', shakeClass: '' }
      ]
    };
  },
  computed: {
    colPer() {
      return 100 / this.colNum;
    },
    itemStyle() {
      const w = `${this.colPer}%`;
      const h = `${this.colPer + 10}%`;
      return {
        'flex-basis': w,
        'padding-top': h
      };
    },
    iconStyle() {
      const w = this.colPer - this.colPer * 0.08;
      const h = this.colPer + 10;
      return {
        height: `${(w / h) * 100}%`
      };
    }
  },
  methods: {
    delIcon(index) {
      this.iconList.splice(index, 1);
    },
    forArrShakeClass() {
      if (!this.shakeing) {
        return;
      }
      if (timeerId) {
        clearTimeout(timeerId);
      }
      timeerId = setTimeout(() => {
        this.iconList.forEach(item => {
          item.shakeClass = randomShakeClass();
        });
        this.forArrShakeClass();
      }, 200);
    },
    startShake() {
      this.shakeing = true;
      // this.forArrShakeClass();
      this.iconList.forEach(item => {
        item.shakeClass = randomShakeClass();
      });
    },
    cancelShake() {
      this.shakeing = false;
      if (timeerId) {
        clearTimeout(timeerId);
      }
      this.iconList.forEach(item => {
        item.shakeClass = '';
      });
    }
  }
};
</script>

<style>
.app-page {
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}
.qs-desktop {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.qs-desktop-item {
  position: relative;
  box-sizing: border-box;
  height: 0;
}

.qs-desktop-item__content {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding: 8%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  align-items: center;
  justify-content: center;
}
.qs-desktop-icon__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80%;
  margin-bottom: 8px;
  box-sizing: border-box;
  font-size: 30px;
  color: #fff;
}
.qs-desktop_icon {
  width: 100%;
  height: 100%;
  border-radius: 14%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qs-del-icon {
  position: absolute;
  top: -3px;
  right: -3px;
  z-index: 3;
  border: #fc0107 2px solid;
  box-shadow: 1px 2px 3px #000000;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: #fc0107;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 动画版本 */
@keyframes shake-a1 {
  from to {
    transform: translate(0.4px, 0.4px) rotate(4deg);
  }
  50% {
    transform: translate(-0.4px, -0.4px) rotate(-4deg);
  }
}
@keyframes shake-a2 {
  from to {
    transform: translate(-0.4px, -0.4px) rotate(-4deg);
  }
  50% {
    transform: translate(0px, -0.6px) rotate(0deg);
  }
}
@keyframes shake-a3 {
  from to {
    transform: translate(0px, -0.6px) rotate(0deg);
  }
  50% {
    transform: translate(0.4px, -0.4px) rotate(4deg);
  }
}
@keyframes shake-a4 {
  from to {
    transform: translate(0.4px, -0.4px) rotate(4deg);
  }
  50% {
    transform: translate(-0.4px, 0.4px) rotate(-4deg);
  }
}
@keyframes shake-a5 {
  from to {
    transform: translate(-0.4px, 0.4px) rotate(-4deg);
  }
  50% {
    transform: translate(0px, 0.6px) rotate(0deg);
  }
}

@keyframes shake-a6 {
  from to {
    transform: translate(0px, 0.6px) rotate(0deg);
  }
  50% {
    transform: translate(0.4px, 0.4px) rotate(4deg);
  }
}

.qs-shake-a1,
.qs-shake-a2,
.qs-shake-a3,
.qs-shake-a4,
.qs-shake-a5,
.qs-shake-a6 {
  animation-duration: 0.2s;
  animation-iteration-count: infinite;
}

.qs-shake-a1 {
  animation-name: shake-a1;
}
.qs-shake-a2 {
  animation-name: shake-a2;
}
.qs-shake-a3 {
  animation-name: shake-a3;
}
.qs-shake-a4 {
  animation-name: shake-a4;
}
.qs-shake-a5 {
  animation-name: shake-a5;
}
.qs-shake-a6 {
  animation-name: shake-a6;
}

/* 过渡版本 */
.qs-shake-t1 {
  transform: translate(0.4px, 0.4px) rotate(4deg);
}
.qs-shake-t2 {
  transform: translate(-0.4px, -0.4px) rotate(-4deg);
}
.qs-shake-t3 {
  transform: translate(0px, -0.6px) rotate(0deg);
}
.qs-shake-t4 {
  transform: translate(0.4px, -0.4px) rotate(4deg);
}
.qs-shake-t5 {
  transform: translate(-0.4px, 0.4px) rotate(-4deg);
}

.qs-shake-t6 {
  transform: translate(0px, 0.6px) rotate(0deg);
}

.qs-shake-t1,
.qs-shake-t2,
.qs-shake-t3,
.qs-shake-t4,
.qs-shake-t5,
.qs-shake-t6 {
  transition: transform 0.1s linear;
}
</style>
